The ::before and ::after pseudo-elements in CSS are used to insert content before or after an element's actual content. The main difference lies in their placement relative to the element's content.

Key Differences

1
::before inserts content immediately before the element's original content.
2
::after inserts content immediately after the element's original content.
3
Both require the content property to display anything.
4
They are commonly used for decorative purposes, icons, or adding extra styling cues without modifying the HTML structure.

Example: Using ::before and ::after

In this example, ::before adds a star before the paragraph text, while ::after adds sparkles after the text, demonstrating the placement difference between the two pseudo-elements.

Best Practices

1
Use ::before and ::after for decorative content or visual cues without altering HTML.
2
Always include the content property; otherwise, nothing will be displayed.
3
Combine with CSS properties like color, font-size, background, or transform for visual effects.
4
Ensure compatibility and test across browsers for consistent rendering.

Difficulty: 3/10

Topics: pseudo-elements, content insertion, CSS rendering order

Scenario Questions

0-2 years experience

1
How would you add a star icon before every review rating using CSS, and what’s the minimum CSS you need to make it show up?
2
What happens if you try to use ::before on an <img> tag? Why doesn’t it work?
3
You’re trying to add a tooltip arrow using ::after, but it’s not showing up—what are the two most likely reasons?

2-5 years experience

1
A designer says the ‘read more’ link’s arrow is misaligned—your ::after arrow is rendering below the text instead of inline. How do you debug and fix it?
2
You’re using ::before for a bullet in a list, but it breaks when the list item wraps on mobile. What’s causing it, and how do you fix it without changing HTML?
3
A teammate used ::before to add a decorative border, but now the layout shifts unexpectedly on Safari. What’s the likely culprit and how do you verify it?

5-8 years experience

1
You’re building a reusable card component that uses ::before and ::after for visual accents, but in some contexts, they’re being clipped by overflow:hidden. How do you design this to be robust across parent containers?
2
In a high-traffic UI, you notice layout thrashing when toggling pseudo-elements via JS. Why is this happening, and what’s a better approach to achieve the same visual effect without performance cost?
3
You inherited a codebase where ::before is used for semantic icons (like a lock for private posts). Is this a good practice? What accessibility and maintainability issues does this introduce?

8+ years experience

1
You’re leading a design system migration from icon fonts to SVGs. Many components used ::before with font icons—how do you plan the transition without breaking legacy layouts or accessibility?
2
Your team uses ::after for visual indicators (e.g., ‘new’, ‘hot’) across 50+ components. How do you architect this to be scalable, themeable, and maintainable across multiple product lines?
3
A legacy app uses ::before and ::after for layout hacks (e.g., clearfixes, spacing). You’re refactoring to CSS Grid. How do you prioritize removal, communicate risk to stakeholders, and avoid regressions?

Follow-up Questions

❓What happens if you forget the content property?
❓Can you style ::before and ::after differently if they have the same content?
❓Why might one of them not appear even when the CSS looks correct?